<template>
  <div>
    <todo-input
      :content="content"
      @update:input-val="updateInputVal"
    ></todo-input>
    <todo-btn
      @add-todo="addTodo"
    ></todo-btn>
  </div>
</template>

<script>
import TodoInput from './TodoInput.vue';
import TodoBtn from './TodoBtn.vue';

export default {
  name: 'TodoHeader',
  components: {
      TodoInput,
      TodoBtn
  },
  data() {
    return {
      content:''
    }
  },
  methods: {
    updateInputVal(value) {
      this.content = value;
    },
    addTodo() {
      this.$emit('addTodo', {
        id: new Date().getTime(),
        content: this.content,
        completed:false
      });
      this.content = '';
    }
  }
 
}
</script>

<style>

</style>
